<template>
  <div>
    <el-card>
      <div slot="header">
        <span>我的等级</span>
      </div>
      <el-empty v-if="!userLVDetail" description="空空如也！" style="height: 615px;"></el-empty>
      <!--等级显示区域-->
      <div v-else>
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="3">
            <div class="LV">
              <svg-icon icon-class="grade_two" style="font-size: 80px" />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="" style="margin-top: 30px">
              <span class="experience-font">今日获得经验</span>
              <span class="experience-font3" v-text='"+"+userLVDetail.today_experience'></span>
            </div>
          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="10">
            <div class="experience">
              <div class="experience-num">
                <span>当前等级</span>
                <span class="experience-font">
                  升级还需
                  <span class="experience-font2" v-text='userLVDetail.end_experience-userLVDetail.experience'></span>
                  经验值
                </span>
              </div>
              <div class="experience-lv">
                <el-tag size="mini" v-text='"LV."+userLVDetail.lv'></el-tag>
                <el-progress class="task-progress" :percentage="userLVDetail.percentage" color="#ffe14c" :show-text="false"></el-progress>
                <el-tag size="mini" v-text='"LV."+(userLVDetail.lv+1)'></el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
        <p>如何成长</p>
        <!--如何成长-->
        <el-table :data="userTasks" stripe style="width: 100%">
          <el-table-column align="center" prop="task_name" label="任务"> </el-table-column>
          <el-table-column align="center" prop="experience" label="经验值"> </el-table-column>
          <!--<el-table-column align="center" prop="max_count" label="最大次数">-->
          <el-table-column align="center" label="最大次数">
            <template slot-scope="scope">
              <div v-if='userTasks[scope.$index].max_count!==0'>
                <el-progress class="task-progress" color="#ffe14c" :text-inside="true" :stroke-width="20" :percentage="userTasks[scope.$index].percentage"></el-progress>
                <span v-text='userTasks[scope.$index].count+"/"+userTasks[scope.$index].max_count'></span>
              </div>
              <div v-else>
                <span>暂未开放</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      userLVDetail: {},
      userTasks: []
    }
  },
  created () {},
  beforeMount () {},
  // DOM对象加载完成时
  mounted () {
    this.getExperienceList()
    this.getTaskList()
  },
  methods: {
    async getExperienceList () {
      const url = this.$config.urls.get('load_user_Lv') + this.userId
      const { data: res } = await this.$http.get(url)
      // console.log(res.data)
      this.userLVDetail = res.data
      this.userLVDetail.percentage = Math.floor(res.data.experience / res.data.end_experience * 100)
    },
    async getTaskList () {
      const url = this.$config.urls.get('load_user_task_desc') + this.userId
      const { data: res } = await this.$http.get(url)
      // console.log(res.data)
      this.userTasks = res.data
      this.userTasks.forEach(item => {
        const percentage = Math.floor(item.count / item.max_count * 100)
        item.percentage = isNaN(percentage) ? 0 : percentage
      })
      // console.log(this.userTasks)
    }
  },
  computed: { ...mapGetters('userCenter', { userId: 'userId' }) },
  name: 'userArticle'
}
</script>

<style lang="less" scoped>
.experience-font {
  font-size: 12px;
  color: #999999;
}
.experience-font2 {
  font-size: 12px;
  color: #00c3ff;
}
.experience-font3 {
  font-size: 14px;
  color: #ffaa4e;
}
.experience-num {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.experience-lv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.task-progress {
  width: 180px;
}
/deep/.cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
